<template>
	<view class="baidumap" :id="`baidumap${canvasId}`" :style="customStyle" v-if="canvasId" ref="baiduMap">
		<web-view class="baidu-map-webview" :style="customStyle" :id="canvasId" :webview-styles="webviewStyles"
			ref="webview" :src="url" @message="handlePostMessage"
			@pagefinish="finished = true"></web-view>
	</view>
</template>
<script>
	import {
		compareVersion,
		wrapTouch,
		devicePixelRatio,
		sleep
	} from './utils';

	export default {
		name: 'baidu-map',
		props: {
			webviewStyles: Object,
			customStyle: String,
			heightRatio: Number,
			url: String
		},
		data() {
			return {
				initTop: 0,
				windowWidth: 0,
				windowHeight: 0,
				inited: false,
				finished: false,
			};
		},
		computed: {
			canvasId() {
				return `baidu-map${this._ && this._.uid || this._uid}`
			}
		},
		beforeDestroy() {},
		created() {},
		mounted() {
			var _this = this
			// #ifdef APP-PLUS
			try{
				const query = uni.createSelectorQuery().in(_this);
				query.select(`#baidumap${this.canvasId}`).boundingClientRect(data => {
					_this.initTop = data.top
					uni.getSystemInfo({
						success: function(res) {
							_this.windowWidth = res.windowWidth
							_this.windowHeight = res.windowHeight
							var currentWebview = _this.$parent.$scope.$getAppWebview();
							setTimeout(function() {
								var wv = currentWebview.children()[0];
								wv.setStyle({
									top: _this.initTop,
									height: res.windowHeight * _this.heightRatio,
									width: res.windowWidth,
									scalable: false,
									background: "transparent",
									position: "static",
								})
							}, 1);
						}
					})
				}).exec();
			}catch(e){
			}
			// #endif
			this.$nextTick(() => {
				this.$emit('finished')
			})
		},
		methods: {
			// webview向外部发送消息
			handlePostMessage: function(data) {
				this.$emit("baiduOnAction", data)
			},
			getId() {
				return this.canvasId;
			},
			scrollTo(e) {
				// #ifdef APP-PLUS
				var _this = this
				var currentWebview = _this.$parent.$scope.$getAppWebview();
				var wv = currentWebview.children()[0];
				wv.setStyle({
					top: _this.initTop - e.scrollTop,
				})
				// #endif
			}
		}
	};
</script>

<style>
</style>